<template>
    <div>
        <el-tree
            :data="menuList"
            show-checkbox
            ref="tree"
            node-key="_id"
            :default-expand-all="true"
            :props="defaultProps">
        </el-tree>

        <el-button type="primary" @click="authRoleFun">确认授权</el-button>
    </div>

</template>
<!-- default-expand-all  默认展开所有子菜单 -->

<!-- :default-expanded-keys="[2, 3]"
:default-checked-keys="[5]" -->

<!-- 第一步： 所有的菜单渲染出来
第二步： 授权 -->

<script>
import axiosEl from '@/utils/axios';
export default {
    props:{
        currentData:Object
    },
 data(){
    return {
        menuList:[],
        defaultProps: {
          children: 'children',
          label: 'title'
        }
    }
 },
 watch:{
    currentData:{
        immediate:true,
        handler(newObj){
            console.log(newObj.menus);  // 把获取到的menu数据写入到tree组件中，数据渲染

            // 先所有的菜单渲染完毕后， 再把做写入选中哪些菜单
            this.$nextTick(()=>{
                this.$refs.tree.setCheckedKeys(newObj.menus);
            })   
        }
    }
 },
 methods:{
     // 去授权
   async  authRoleFun(){
        // id: 当前角色id , authUser 谁在授权  authTime: 授权时间   menus 选中的菜单
        // menus: 需要获取到选中的menus
        
        console.log(this.$refs.tree.getCheckedKeys());

     let resData = await  axiosEl({
            url:'/roles/addAuth',
            method:'post',
            data:{
                id:this.currentData._id,
                authUser:this.$store.state.userInfo.nickname,
                authTime:(new Date()).toLocaleDateString(),
                menus:this.$refs.tree.getCheckedKeys()   // 选中的权限菜单
            }
        })
        if(resData.code==1){
            this.$message({
                type:'success',
                message:resData.msg
            })
            // 告诉父组件 去关闭弹框和刷新页面
            this.$emit('send',true)
        }
     },

    // 获取菜单列表
    getMenuList(){
      axiosEl({
            method:'get',
            url:'/menu/list',
        }).then((res)=>{
            console.log(res.data);
            this.menuList = res.data;
        })

    },
 },

    created(){
        this.getMenuList();


    }
}
</script>

<style>

</style>